<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./02-element-ui/index.css" />
	</head>
	<style>
		body,
		html {
			padding: 0%;
			margin: 0%;
			width: 100%;
			height: 100%;

		}

		#robot {
			height: 100%;
		}

		.el-header,
		.el-footer {
			background-color: rgb(84, 92, 100);
			color: #333;
			line-height: 60px;
			padding: 0;
			position: fixed;
			display: flex;
			width: 100%;
		}

		.el-container {
			height: 100%;
		}

		.el-aside .el-container {
			height: 100%;
		}

			{
			background-color: #D3DCE6;
			color: #333;
			text-align: center;
			line-height: 200px;
		}

		.el-main {
			background-color: #E9EEF3;
			color: #333;
			text-align: center;
			line-height: 30px;
			height: 100%;
			margin-top: 60px;
		}

		body>.el-container {
			margin-bottom: 40px;
		}

		.el-container:nth-child(5) .el-aside,
		.el-container:nth-child(6) .el-aside {
			line-height: 260px;
		}

		.el-container:nth-child(7) .el-aside {
			line-height: 320px;
		}

		.mulu {
			position: fixed;
		}

		.mu2 {
			width: 100%;
			text-align: center;
			color: white;
			border-bottom: 2px solid rgb(255, 255, 255);
		}

		.el-submenu__title {
			border-bottom-color: white !important;
		}

		.tit {
			text-align: left;
			line-height: 30px;
			font-size: 28px;

		}
		.tit1 {
			text-align: left;
			line-height: 26px;
			font-size: 24px
			
		}

		p {
			font-size: 18px;
			line-height: 20px;
			text-align: left;
			padding-bottom: 5px;
			color: #40485b;
		}
		.span1{
				font-size: 18px;
				text-align: left;
				color: #40485b;
				padding: 0 10px;
				padding-bottom: 5px;
				background-color: #f6f8fa;
		}

		.p1 {
			border-bottom: solid 2px #9a9a9a;
		}

			
		a{
			color: blue;
		}
		.a1 {
			text-decoration: none;
		}

		.el-avatar {
			line-height: 60px;
			height: 58px;
			width: 60px;
			
		}
		.user{
						border-bottom: 2px solid rgb(255, 255, 255);
						width: 60px;
						height: 58px;
		}
		.con12{
			color: red;
			text-decoration:#40485b ;
		}
		.con1{
			border-bottom: solid 2px #9a9a9a;
			padding-bottom: 10px;
			margin-top: 5px;
		}
		#part3{
			margin-top: 20px;
		}
		.p2{
			border: 0px;
		}
		.p3{
						border-bottom: dashed 2px #9a9a9a;
		}
			
		.tit2{
			text-align: left;
			line-height: 23px;
			font-size: 21px
			
		}
		.tit3{
			text-align: left;
			line-height: 20px;
			font-size: 18px;
			color: red;
		}
		.head{
									border-bottom: 2px solid rgb(255, 255, 255);
		}
	</style>
	<body>
		<div id="robot">
			<el-container>
				<el-header>
					<div class="mu2">机器人工具介绍</div>
					<el-menu :default-active="activeIndex2" class="el-menu-demo mulu" mode="horizontal"
						@select="handleSelect" background-color="#545c64" text-color="#fff"
						active-text-color="rgb(255, 255, 255)">
						<el-submenu index="1">
							<template slot="title">目录</template>
							<a href="#part1" class="a1"><el-menu-item index="1-1">简介</el-menu-item></a>
							<a href="#part2" class="a1"><el-menu-item index="1-2">协处理器通信节点（COPS）</el-menu-item></a>
							<a href="#part3" class="a1"><el-menu-item index="1-3">LINUX中文界面（LCI）</el-menu-item></a>
							<el-submenu index="1-4">
								<template slot="title">脚本并发机（PMC）</template>
								<a href="#part4" class="a1"><el-menu-item index="1-4-1">介绍</el-menu-item></a>
								<el-submenu index="1-4-2">
									<template slot="title" class="a1">PMC服务</template>
									<a href="#lipart1" class="a1"><el-menu-item index="1-4-2-1">聊天室服务（chat.py）</el-menu-item></a>
									<a href="#lipart2" class="a1"><el-menu-item index="1-4-2-2">ssh协议（sshd.py）</el-menu-item></a>
									<a href="#lipart3" class="a1"><el-menu-item index="1-4-2-3">ftp协议（ftpd.py）</el-menu-item></a>
									<a href="#lipart4" class="a1"><el-menu-item index="1-4-2-4">dnfs树状网络文件系统（dnfs/dnfs.py）</el-menu-item></a>
									<a href="#lipart5" class="a1"><el-menu-item index="1-4-2-5">摄像头UDP图传 (imgs/server.py)</el-menu-item></a>
								</el-submenu>
							</el-submenu>
						</el-submenu>
					</el-menu>
					    <div class="head">
					      <el-avatar> user </el-avatar>
					    </div>
				</el-header>
				
				<el-main>
					<div id="part1" class="tit">
						简介:
					</div>
					<p class="p1">这是我们创建的用于机器人的协处理器网络项目
						<a :href="COPS">（COPS）</a>
						，该项目创建的机器人是分布式的，通过机载的交换机进行通信。

						其中，包含操作系统的主机可以运行我们的脚本管理器
						<a :href="PMC">（PMC）</a>
						，这是一个进程创建、管理功能的程序，类似简化版的青龙面板。

						我们利用脚本管理器运行机器人的控制脚本，将信息发送到不同的控制设备，这些设备上都跑HTTP伺服器。
					</p>
					<div id="part2" class="tit">
						什么是协处理器通信节点
						<a :href="COPS">（COPS）</a>
						:

					</div>
					<p class="p2">- 我们将一组具有特别功能的设备组网，使不同设备之间能够进行通信，它们之间并保持一问一答的状态（HTTP协议）。</p>
					<div class="tit1">
						~下面是协处理器通信节点的API文档:
					</div>
					<div class="con1"><span class="span1">curl -X POST http://localhost:8001/api -d </span><span class="span1 con12">'"MUP6050"'</span></div>
					<div id="part3" class="tit">
						什么是LINUX中文界面<a :href="LCI">（LCI）</a>:
					</div>
										<p class="p2">- 简单读写帧缓冲内存，使得部分没有图形界面的LINUX设备可以进行中文交互。</p>
										<div  class="tit1">
											~LCI的使用方法:
										</div>
										<p class="p1">
											1.sudo ./lci -e CMD <br />
											2.(!) 退出方式是ESC
										</p>
					<div id="part4" class="tit">
						什么是脚本并发机<a :href="PMC">（PMC）</a>:
					</div>
					<p class="p2">
						1.PMC是一种进程管理程序，它能够创建并且管理进程。 <br />
					2.我们用它来托管脚本，包括用它搭建一些子系统。
					</p>
					<div class="tit1">
						~下面是协处理器通信节点的API文档:
					</div>
					
										<div class="con1"><span class="span1">curl -X POST http://localhost:8002/api?call=shell&path=/to/your/cmd -d </span><span class="span1 con12">'["your", "params"]'</span></div>
										<div class="tit1">
											~我的PMC里跑了哪些服务:
										</div>
										<div class="tit2" id="lipart1">
											一.聊天室服务<a :href="CHAT" >（chat.py）</a>:
										</div>
										<p class="p3">
											1.这是一个TCP通信服务，客户端发送消息，由服务器转发给其他的连接者。
											
											<br />2.它的客户端分为发送端和接收端。
										</p>
										<div class="tit2" id="lipart2">
											二.ssh协议<a :href="SSHD" >（sshd.py）</a>:
										</div>
										<p class="p">通过ssh协议进行通信，虽然没有运行shell，但能够发送键盘按键信息过去。</p>
										<div class="tit3">依赖</div>
																				<p class="p3">python3-paramiko</p>
										<div class="tit2" id="lipart3">
											三.ftp协议<a :href="FTPD" >（ftpd.py）</a>:
										</div>
																				<p class="p">能够进行文件传输。</p>
																														<div class="tit3">依赖</div>
																									<p class="p3">python3-pyftpdlib python3-openssl</p>
										<div class="tit2" id="lipart4">
											四.dnfs树状网络文件系统<a :href="DNFS" >（dnfs/dnfs.py）</a>:
										</div>
																				<p class="p">能够进行文章的树状存储。</p>
																														<div class="tit3">依赖</div>
																									<p class="p3">python3-flask python3-flask-sqlalchemy</p>
										<div class="tit2" id="lipart5">
											五.摄像头UDP图传<a :href="SERVER" >(imgs/server.py)</a>:
										</div>
																				<p class="p">开启一个UDP服务器，向连接者发送我们的摄像头图像。连接者需要发送心跳。</p>
																														<div class="tit3">依赖</div>
																									<p class="p3">python3-opencv</p>	
																								
				</el-main>
			</el-container>
		</div>
	</body>
	<script src="01-vue/vue.js"></script>
	<script src="02-element-ui/index.js"></script>
	<script>
		new Vue({
			el: "#robot",
			data: {
				activeIndex: '1',
				activeIndex2: '1',
				COPS:"",
				PMC:"",
				LCI:"",
				CHAT:"",
				SSHD:"",
				FTPD:"",
				DNFS:"",
				SERVER:"",
			},
			methods: {
				handleSelect(key, keyPath) {
					console.log(key, keyPath);
				}
			}
		})
	</script>
</html>